<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Input 属性</title>
</head>
<body>
<form action="">
    <!--  readonly="readonly" -->
    First name:<br>
    <input type="text" name="firstname" value="John" readonly>   <!--  有默认值的input value 就是默认的值  readonly 只显示-->
    <br>
    Last name:<br>
    <input type="text" name="lastname"><br>
    Disable name:<br>
    <input type="text" name="disable" value="ddd" disabled><br>  <!-- disabled 属性规定输入字段是禁用的 被禁用的元素是不可用和不可点击的。被禁用的元素不会被提交。啥反应也没有点击 -->
    Limite Size:<br>
    <input type="text" name="size" value="sizeYou" size="30"> <br> <!--  以字符计算的 10 个 其实输入的时候并没限制 一样可以输入 不知道提交的时候 是否会发生改变 size 其实是输入框的大小 矩形的输入框 -->
    MaxLength: <br>
    <input type="text" name="maxLength" maxlength="10"><br>  <!-- 这个输入的字符 中文 字母 数字 也是按照 字符计算  其实正常的校验应该使用 -->
 </form>

<p> HTML 5 属性</p>
<!--   novalidate 不对表单数据进行验证 -->
<form action="action_page.php" autocomplete="on" novalidate>
    First name: AutoFocus 自动获取焦点<input type="text" name="fname" autofocus><br>
    Last name: <input type="text" name="lname"><br>
    E-mail: <input type="email" name="email" autocomplete="off"><br>
    <input type="submit">
    <input type="submit" formaction="demo_admin.asp" value="submit as admin">
</form>

<p>  测试 mutipart/form-data</p>
<!--  formeenctype  编码针对 -->
<form action="action_page.php" autocomplete="on" novalidate method="post">
    First name: AutoFocus 自动获取焦点<input type="text" name="fname" autofocus><br>
    Last name: <input type="text" name="lname"><br>
    E-mail: <input type="email" name="email" autocomplete="off"><br>
    Image can use height and width attributes: <input type="image" src="../images/eg_cute.gif" alt="submit" width="50" height="50" formtarget="_blank"><br>  <!--  也可以 指定新的的跳转 -->
    <input type="submit"><br>
    <input type="submit" formaction="demo_admin.asp" value="submit as admin" formenctype="multipart/form-data"  formtarget="_blank"><br>
    Mutiple 属性: <br>
    <input type="file" name="img" multiple> <br>
    Pattern 属性:<br>
    <input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three Letter Country Code">
    Place Holder 属性:<br>
    <input type="text" placeholder="First Name"><br>
    Required 属性:
    <input type="text" name="username" required><br>
    Step 属性: <br>
    <input type="number" name="points" step="3"><br>
</form>

</body>
</html>